<!--
 * @Author: dengyl
 * @Date: 2022-02-14 16:33:18
 * @LastEditTime: 2022-05-13 09:39:50
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @Description: @人
 * @FilePath: \code\cwp-front\pc-collaboration\src\components\atom\at-who\index.vue
-->
<template>
  <div class="at-who" :class="[openCollapse && isCollapse ? 'at-who-isCollapse' : '']">
    <!-- 意见输入框 -->
    <div
      class="rich-text"
      v-if="!noRichText && isRichText"
      :class="[
        isPublishPhrases && !praiseAndPhrases.allowCommonPhrase ? 'comment-no-commonPhrases' : ''
      ]">
      <RichText
        class="rich-text-textarea"
        :isRow="fixRows"
        :styleObj="richTextStyle"
        ref="richText"
        v-model="commentText" />
      <div v-show="isPublishPhrases" class="show-common-phrases">
        <i
          v-if="praiseAndPhrases.canPraise"
          @click="praiseTo"
          class="syIcon sy-praise-margin"
          :class="praiseAndPhrases.isPraise ? 'sy-praise-fill' : 'sy-praise'"></i>
        <!-- 常用语 -->
        <CommonPhrases
          class="phrases-ellipsis"
          v-if="praiseAndPhrases.allowCommonPhrase"
          :comment="commentText"
          :isRichText="isRichText"
          :showPhrases="isPublishPhrases"
          @choose-phrases="(text) => settingPhrases(text)" />
      </div>
    </div>
    <div
      class="at-who-comment"
      v-else
      :class="[
        isPublishPhrases && !praiseAndPhrases.allowCommonPhrase ? 'comment-no-commonPhrases' : ''
      ]">
      <a-mentions
        :class="[isPublishPhrases ? 'textarea-padding' : '']"
        ref="mentions"
        :maxLength="maxLength"
        :placeholder="placeholder"
        :value="value"
        :rows="textareaRows"
        @change="mentionChange"
        @focus="handleInputFocus"
        @select="onSelect"
        @blur="handleInputBlur">
        <a-mentions-option
          v-for="(people, index) in pushPeopleList"
          :key="people.memberId + '-' + index"
          :value="people.memberName"
          >{{ people.memberName }}
        </a-mentions-option>
      </a-mentions>
      <div v-show="isPublishPhrases" class="show-common-phrases">
        <i
          v-if="praiseAndPhrases.canPraise"
          @click="praiseTo"
          class="syIcon sy-praise-margin"
          :class="praiseAndPhrases.isPraise ? 'sy-praise-fill' : 'sy-praise'"></i>
        <!-- 常用语 -->
        <CommonPhrases
          class="phrases-ellipsis"
          v-if="praiseAndPhrases.allowCommonPhrase"
          :comment="commentText"
          :isRichText="isRichText"
          :showPhrases="isPublishPhrases"
          @choose-phrases="(text) => settingPhrases(text)" />
      </div>
    </div>
  </div>
</template>
<script>
  //文本域的获取提及列表
  import { getMentionList } from './helper';
  import { mapState, mapWritableState } from 'pinia';

  import { useSummaryCommentStore } from '@/store/modules/summary/comment';
  // import RichText from '@/components/classic-layout/summary/handle-right-new/components/textarea/components/rich-text/index.vue';
  const RichText = () =>
    import(
      /* webpackChunkName: "chunk-richtext" */ '@/components/classic-layout/summary/handle-right-new/components/textarea/components/rich-text/index.vue'
    ).then((m) => m.default);

  import CommonPhrases from '@/components/classic-layout/summary/handle-right-new/components/textarea/components/common-phrases/index.vue';
  import emitter from '@/plugins/global-callback';

  export default {
    components: { RichText, CommonPhrases },
    props: {
      // 打开收起模式
      openCollapse: {
        type: Boolean,
        default: false
      },
      // 屏蔽富文本
      noRichText: {
        type: Boolean,
        default: false
      },
      maxLength: {
        type: Number
      },
      placeholder: {
        type: String
      },
      //可选取推送人员列表
      pushPeopleList: {
        type: Array
      },
      // 文本内容
      value: {
        type: String,
        default: ''
      },
      rows: {
        type: Number,
        default: 1
      },
      fixRows: {
        type: Boolean,
        default: true
      },
      praiseAndPhrases: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        textareaRows: this.rows,
        richTextStyle: null
      };
    },
    watch: {
      rows(val) {
        console.log('--rows--changed', val, this.textareaRows);
        this.textareaRows = val;
      },
      fixRows(v) {
        if (v) {
          this.richTextStyle = {
            height: '100px'
          };
        } else {
          this.richTextStyle = {
            height: '32px'
          };
        }
      }
    },
    methods: {
      //获取焦点
      //此处先注销，放在外层回调获取焦点
      focus() {
        // this.$refs.mentions.focus();
      },
      //获取提及人员信息
      getMentionList() {
        return getMentionList(this.value);
      },
      onSelect() {
        console.log('onSelect');
      },
      mentionChange(v) {
        this.$emit('input', v);
        if (this.fixRows) {
          return;
        }
        if (!this.noRichText && this.isRichText) {
          let scrollHeight = this.$refs.richText.$el.querySelector(
            '.j-rich-editor-scroll-content'
          ).scrollHeight;
          if (scrollHeight > 30) {
            let rows = Math.min(Math.floor(scrollHeight / 28), 3);
            this.richTextStyle = {
              height: rows * 28 + 10 + 'px'
            };
          } else {
            this.richTextStyle = {
              height: '32px'
            };
          }
        } else {
          let scrollHeight = this.$refs.mentions.$el.querySelector('textarea').scrollHeight;
          console.log('scrollHeight=============', scrollHeight);
          if (scrollHeight > 30) {
            let rows = Math.min(Math.floor(scrollHeight / 20), 3);
            console.log('rows=============', rows);
            this.$nextTick(() => {
              this.textareaRows = rows;
            });
          } else {
            this.textareaRows = 1;
          }
        }
      },
      handleInputFocus() {
        if (this.fixRows) {
          return;
        }
        let scrollHeight = this.$refs.mentions.$el.querySelector('textarea').scrollHeight;
        if (scrollHeight > 30) {
          let rows = Math.min(Math.floor(scrollHeight / 20), 3);
          if (rows > this.textareaRows) {
            this.$nextTick(() => {
              this.textareaRows = rows;
            });
          }
        }
      },
      handleInputBlur() {
        if (this.fixRows || this.value) {
          return;
        }
        let scrollElem = this.$refs.mentions.$el.querySelector('textarea');
        scrollElem.scrollTop = 0;
        this.textareaRows = 1;
      },
      praiseTo() {
        this.$emit('praiseOrCancel');
      },
      settingPhrases(text) {
        this.$emit('choosePhrases', text);
        //更新高度
        this.$nextTick(() => this.mentionChange(this.value));
      }
    },
    mounted() {
      if (this.praiseAndPhrases.showPhrases) {
        emitter.publish('deal-fullscreenToggle');
      }
    },
    computed: {
      ...mapState(useSummaryCommentStore, ['isCollapse']),
      ...mapWritableState(useSummaryCommentStore, ['commentText', 'isRichText']),
      isPublishPhrases() {
        if (this.praiseAndPhrases.showPhrases) {
          emitter.publish('deal-fullscreenToggle');
        }
        return this.praiseAndPhrases.showPhrases;
      }
    }
  };
</script>
<style lang="scss">
  .at-who-isCollapse {
    .ant-mentions {
      //height: 32px;
    }
    textarea {
      line-height: 20px;
      //height: 32px;
      padding: 7px 20px 5px 10px;
    }
    .textarea-padding {
      textarea {
        padding-right: 100px;
      }
    }
    .comment-no-commonPhrases {
      textarea,
      .j-rich-editor-scroll-content {
        padding-right: 40px;
      }
      .sy-praise-margin {
        margin-right: 0 !important;
      }
    }
  }
  .at-who {
    overflow-y: hidden;
    textarea {
      box-sizing: border-box !important;
      border: 0 !important;
    }
  }
</style>
<style scoped lang="scss">
  .at-who {
    // margin-top: 5px;
    position: relative;

    ::v-deep .ant-mentions {
      textarea {
        &:hover {
          border: 0;
        }
      }
    }
    .at-who-comment {
      display: flex;
      background-color: #fff;
      position: relative;
    }
    .show-common-phrases {
      position: absolute;
      right: 0;
      bottom: 5px;
      display: flex;
      align-items: center;
      padding-right: 12px;
      padding-left: 12px;
      // max-width: 160px;
      height: 20px;
      .sy-praise-margin {
        margin-right: 16px;
        cursor: pointer;
      }
      .sy-praise-fill {
        color: #1890ff;
        color: var(--theme-brand6, #1890ff);
        &:hover {
          color: #40a9ff;
          color: var(--theme-brand6, #40a9ff);
        }
      }
      .sy-praise:hover {
        color: #1890ff;
        color: var(--theme-brand6, #1890ff);
      }
      .phrases-ellipsis {
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        &:hover {
          color: #1890ff;
          color: var(--theme-brand6, #1890ff);
        }
      }
    }
  }
  .rich-text {
    ::v-deep .editor-content-wrapper {
      padding-right: 0;
    }
    ::v-deep .j-rich-editor-scroll-content {
      padding-right: 100px;
    }
  }
</style>
